const STORESTATUS = {
  0: '营业中',
  1: '歇业'
}
export default {
  Store: {
    form: {
      fields: [
        'name',
        { property: 'user' },
        { property: 'logo', type: 'image' },
        {
          property: 'status',
          default_value: '0',
          component: {
            props: ['form', 'property'],
            render(h) {
              return (
                <el-select v-model={this.form[this.property]} placeholder='请选择类型'>
                  <el-option label='营业中' value='0'></el-option>
                  <el-option label='歇业' value='1'></el-option>
                </el-select>
              )
            }
          }
        },
        'region',
        'address',
        'phone',
        {
          property: 'map',
          // Baidu Map Component Sample
          field_options: { label: '地图' },
          component: {
            data() {
              return {
                keyword: '',
                center: { lng: 113.09, lat: 22.62 },
                zoom: 17
              }
            },
            watch: {
              form: {
                handler: function(val) {
                  if (val.longitude && val.latitude) {
                    [this.center.lng, this.center.lat] =
                    this.tencentMapPointToBaiduMap(val.longitude, val.latitude)
                    this.mapCenterRefresh()
                  }
                },
                deep: true
              }
            },
            methods: {
              ready({ BMap, map }) {
                this.BMap = BMap
                this.map = map
                this.mapCenterRefresh()
              },
              click({ type, target, point, pixel, overlay }) {
                [this.form['longitude'], this.form['latitude']] =
                this.baiduMapPointToTencentMap(point.lng, point.lat)
              },
              mapCenterRefresh() {
                this.map.centerAndZoom(new this.BMap.Point(this.center.lng, this.center.lat), this.zoom)
              },
              baiduMapPointToTencentMap(lng, lat) {
                if (lng == null || lng === '' || lat == null || lat === '') { return [lng, lat] }

                const x_pi = 3.14159265358979324
                const x = parseFloat(lng) - 0.0065
                const y = parseFloat(lat) - 0.006
                const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
                const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)

                return [
                  (z * Math.cos(theta)).toFixed(7),
                  (z * Math.sin(theta)).toFixed(7)
                ]
              },
              tencentMapPointToBaiduMap(lng, lat) {
                if (lng == null || lng === '' || lat == null || lat === '') { return [lng, lat] }

                const x_pi = 3.14159265358979324
                const x = parseFloat(lng)
                const y = parseFloat(lat)
                const z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi)
                const theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi)
                return [
                  (z * Math.cos(theta) + 0.0065).toFixed(5),
                  (z * Math.sin(theta) + 0.006).toFixed(5)
                ]
              }
            },
            props: ['form', 'property'],
            render(h) {
              return (
                <baidu-map center={this.center} onReady={this.ready} onClick={this.click}
                  style={{ width: '100%', height: '400px', border: '1px solid #ddd', borderRadius: '5px' }}
                >
                  <bm-navigation anchor='BMAP_ANCHOR_TOP_RIGHT'></bm-navigation>
                  <bm-marker position={this.center} animation='BMAP_ANIMATION_BOUNCE'></bm-marker>

                  <bm-control offset={{ width: '10px', height: '10px' }}>
                    <bm-auto-complete v-model={this.keyword} sugStyle={{ zIndex: 1 }}>
                      <input placeholder='请输入搜索地名关键字'></input>
                    </bm-auto-complete>
                  </bm-control>
                  <bm-local-search keyword={this.keyword} auto-viewport={true} hidden={true}></bm-local-search>
                </baidu-map>
              )
            }
          }
        },
        { property: 'longitude' },
        { property: 'latitude' },
        'description'
      ]
    },
    list: {
      export: {
        query: {
          limit: 10000,
          '@display': `{
          'id': 'entity.getId()',
          'name': 'entity.getName()',
          'status': 'entity.getStatus()'
        }`
        },
        label: {
          'id': 'ID',
          'name': '门店名',
          'status': '状态'
        }
      },
      list_filter: {
        status: Object.assign({ __label: '状态' }, STORESTATUS),
        'name': '名称'
      },
      query: {
        '@order': 'entity.status|ASC'
      },
      list_display: [
        'id',
        'user',
        'region',
        'name',
        { property: 'phone', label: '电话', editable: true },
        { property: 'logo', type: 'image' },
        {
          property: 'status',
          label: '状态',
          editable: true,
          component: {
            props: ['data'],
            render(h) {
              if (this.data === '0') {
                return (
                  <el-tag type='success' >正常营业</el-tag>
                )
              }
              if (this.data === '1') {
                return (
                  <el-tag type='danger' >歇业</el-tag>
                )
              }
              if (this.data === '2') {
                return (
                  <el-tag type='primary' >开业筹备中</el-tag>
                )
              }
            }
          }
        }
      ]
    }
  }
}
